/* MagicBentoDemo.css - Styles for the Magic Bento Demo page */

.magic-bento-demo {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: 2rem;
}

.demo-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--header-gradient-start, #6a11cb) 0%, var(--header-gradient-end, #2575fc) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demo-header p {
  font-size: 1.1rem;
  color: var(--text-secondary, #666);
  max-width: 600px;
  margin: 0 auto;
}

.demo-controls {
  background: var(--controls-bg, #f8f9fa);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--card-border, transparent);
}

.demo-controls h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-primary, #333);
}

.control-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.control-group label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text-primary, #444);
}

.control-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--glow-color, #6a11cb);
}

.control-group input[type="range"] {
  width: 100%;
  margin: 0.5rem 0;
}

.control-group input[type="text"] {
  padding: 0.5rem;
  border: 1px solid var(--input-border, #ddd);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #333);
}

.demo-component {
  background: var(--component-bg, #0a0a0a);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--card-border, transparent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .magic-bento-demo {
    padding: 1rem;
  }
  
  .demo-header h1 {
    font-size: 2rem;
  }
  
  .control-group {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .control-group {
    grid-template-columns: 1fr;
  }
  
  .demo-controls {
    padding: 1rem;
  }
}